<template>
  <div>
    <el-table :data="groupList" stripe style="width: 100%">
      <el-table-column label="团长信息" width="320">
        <template v-slot="{ row }">
          <div class="leaderMsg">
            <div style="width:50px;height:50px;">
              <img :src="row.image" style="width:50px;height:50px;" />
            </div>
            <div class="leaderMsg__msg">
              <div class="leaderMsg__msg--item">
                {{ row.name }}({{ row.phone }})
              </div>
              <div class="leaderMsg__msg--item">{{ row.community }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="线路">
        <template v-slot="{ row }">
          <div style="padding-left:10px;">{{ row.ruter }}</div>
        </template>
      </el-table-column>
      <el-table-column label="微信群">
        <template v-slot="{ row }">
          <div class="groupNum" @click="wxShow = true">
            {{ row.wxGroupNum }} >
          </div>
          <el-dialog
            :visible.sync="wxShow"
            width="650px"
            :close-on-click-modal="false"
            :show-close="false"
          >
            <div slot="title" class="diaTitle">查看微信群</div>
            <ShowWxList></ShowWxList>
            <div class="pageButtom">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="cancel">保存</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <div class="dealSWay">
            <div>编辑</div>
            <div @click="addWxGroup">添加微信群</div>
            <div>删除</div>
          </div>
          <el-dialog
            :visible.sync="groupShow"
            width="650px"
            :close-on-click-modal="false"
            :show-close="false"
          >
            <div slot="title" class="diaTitle">添加微信群</div>
            <AddGroup></AddGroup>
            <div class="pageButtom">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="cancel">保存</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ShowWxList from "./RobotDialog/showWxList.vue";
import AddGroup from "./RobotDialog/AddGroup.vue";

@Component({
  components: {
    ShowWxList,
    AddGroup,
  },
})
export default class RobotList extends Vue {
  groupList = [];

  /** 查看微信群 */
  wxShow = false;

  /** 添加/编辑微信群 */
  groupShow = false;

  /**
   * 添加微信群
   */
  addWxGroup() {
    this.groupShow = true;
  }

  cancel() {
    this.wxShow = false;
    this.groupShow = false;
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell {
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 30px;
}

.leaderMsg {
  display: flex;
  padding: 10px;
  &__msg {
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
    width: 250px;
    align-content: space-between;
    &--item {
      width: 250px;
      font-size: 12px;
      color: #333333;
    }
  }
}

.groupNum {
  color: #006eff;
  cursor: pointer;
  padding-left: 30px;
}

.dealSWay {
  padding-left: 20px;
  display: flex;
  width: 170px;
  justify-content: space-between;
  color: #006eff;
  cursor: pointer;
}

.diaTitle {
  font-weight: bold;
  font-size: 15px;
}

.pageButtom {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
